<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
    <ul tag="ul" class="slide-ul" :name="name">
      <li v-for="(item , index ) in slides" :key="index" v-show="index===nowIndex">
        <a :href="item.href" :target="target">
          <img :src="item.src" alt />
        </a>
      </li>
    </ul>
    <ul class="slide-pages">
      <li v-for="(item, index) in slides" @click="goto(index)" class="slide-page-point">
        <a :class="{'active': index === nowIndex}">{{ index + 1 }}</a>
      </li>
    </ul>
    <div class="control-wrapper">
      <a class="prev" :style="{backgroundPositionX: prevX}" @click="goto(prevIndex)"></a>
      <a class="next" :style="{backgroundPositionX: nextX}" @click="goto(nextIndex)"></a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    slides: {
      type: [Array, Object],
      default: () => []
    },
    inv: {
      type: Number,
      default: 1000
    },
    name: {
      type: String,
      default: 'move'
    },
    target: {
      type: String,
      default: '_blank'
    }
  },
  data() {
    return {
      nowIndex: 0,
      prevX: '-7px',
      nextX: '-52px',
    }
  },
  computed: {
    prevIndex() {
      if (this.nowIndex === 0) {
        return this.slides.length - 1
      } else {
        return this.nowIndex - 1
      }
    },
    nextIndex() {
      if (this.nowIndex === this.slides.length - 1) {
        return 0
      } else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    goto(index) {
      this.nowIndex = index
    },
    runInv() {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    clearInv() {
      clearInterval(this.invId)
    }
  },
  mounted() {
    this.runInv()
  }
}
</script>
<style lang="less" scoped>
.slide-pages {
  position: absolute;
  bottom: 20px;
  right: 30px;
  li {
    display: inline-block;
    height: 18px;
    a {
      display: block;
      width: 6px;
      height: 6px;
      margin: 0 5px;
      border: 2px solid #fff;
      border-color: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      text-align: left;
      text-indent: -9999px;
      overflow: hidden;
      _zoom: 1;
      background: #f5f5f5;
      background: rgba(0, 0, 0, 0.4);
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      &.active {
        background: #fff;
        background: rgba(255, 255, 255, 0.4);
        border-color: #757575;
        border-color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
.control-wrapper {
  a {
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 41px;
    height: 69px;
    transform: translateY(-50%);
  }
}
.prev {
  left: 0;
  background: url('http://c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png')
    no-repeat -164px 50%;
    background-position-x: -164px;
    zoom: .8;
  // &:hover {
  //   background-position: -14px 50%;
  // }
}
.next {
  right: 0;
  display: inline-block;
  background: url(//c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -250px
    50%;
    zoom: .8;

  // &:hover {
  //   background-position: -95px 50%;
  // }
}
.slide-show {
  position: relative;
  overflow: hidden;
}
.slide-ul {
  width: 100%;
  height: 100%;

  li {
    // position: absolute;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
    }
  }
}
.move-enter-active {
  transition: all 0.5s ease;
  transform: translateX(0);
}
.move-leave-active {
  transition: all 0.5s ease;
  transform: translateX(-100%);
}
.move-enter {
  transform: translateX(100%);
}
.move-leave {
  transform: translateX(0);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>